<template>
	<view>
		<!-- 头部导航 -->
		<view class="tabbbar">
		  <text class="quxiaojiantou"><</text>
		  <text class="tabtext">打卡</text>
		</view>
    
    <!-- 内容区 -->
    <view class="dakaconter">
      <!-- 顶部视图 -->
      <view class="dakatop">
        <view >
          <image src="../Allcourses/img/zhouri.png" mode=""></image>        
        </view>
        <view class="username">
          <text>范冰冰</text>
          <text>所属校区：舜泽琴行</text>
        </view>
      </view>
      <view class="dakabottom">
        <view class="qjtitle">
          <text></text>
          <text>打卡信息</text>
        </view>
       <view class="kemuList">
         <!-- 1 -->
         <view>
           <text>所学科目：</text>
           <text>钢琴</text>
         </view>
         <!-- 2 -->
         <view>
           <text>上课时间：</text>
           <text>2020-05-20 16:00~17:00 </text>
         </view>
         <!-- 3 -->
         <view>
           <text>上课老师：</text>
           <text>九米阳光</text>
         </view>
         <button type="default" class="shenqingdaka">申请打卡</button>
       </view>
      
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
/* tabbar */
.tabbbar {
  width: 100%;
  height: 116rpx;
 background: url(../img/tabbar.png) no-repeat;
 background-size: cover;
  opacity: 0.3;
  

}
.quxiaojiantou {
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
      line-height: 114rpx;
      margin-left: 50rpx;
}
.tabtext {
  width: 70rpx;
  height: 34rpx;
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 30rpx;

 margin-left: 250rpx;
}
/* 内容 */
.dakatop {
  display: flex;
  margin-left: 70rpx;
  margin-top: 51rpx;
}
.dakatop image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 34rpx;
}
.username {
  display: flex;
  flex-direction: column;
  margin-top: 15rpx;
}
.username text:nth-child(1) {
  font-size: 36rpx;
  font-family: PingFang;
  font-weight: bold;
  color: #333333;
  line-height: 40rpx;
  padding-bottom: 21rpx;
}
.username text:nth-child(2) {
  font-size: 28rpx;
  font-family: PingFang;
  font-weight: bold;
  color: #AAAAAA;
  line-height: 40rpx;
}
.dakabottom {
  width: 690rpx;
  height: 470rpx;
  background: #FFFFFF;
  box-shadow: 0px 0px 40rpx 0px rgba(0, 0, 0, 0.16);
  border-radius: 10rpx;
  margin: 56rpx auto auto;

}
.qjtitle {
padding-top: 30rpx;
  margin-left: 43rpx;
}
.qjtitle text:nth-child(1){
  display: inline-block;
  width: 6rpx;
  height: 20rpx;
  background: #8DCE2A;
  border-radius: 3rpx;
  margin-right: 18rpx;
}
.qjtitle text:nth-child(2) {
width: 127rpx;
height: 30rpx;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 40rpx;
}
.kemuList {
  margin-top: 53rpx;
  margin-left: 72rpx;
  }
  .kemuList view text:nth-child(1) {
    font-size: 32rpx;
    font-weight: 800;
    color: #333333;
  }
   .kemuList view text:nth-child(2) {
     font-size: 28rpx;
     color: #000000;
     padding-left: 30rpx;
   }
   .kemuList view {
     margin-bottom: 40rpx;
     }
     .shenqingdaka {
       width: 260rpx;
       height: 70rpx;
       background: linear-gradient(90deg, #D2F79A 0%, #8DCE2A 100%);
       border-radius: 35rpx;
       font-size: 32rpx;
       color: #FFFFFF;
       line-height: 70rpx;
       position: relative;
       left: -34rpx;
       }
</style>
